﻿<!--
    This file is part of WWW-Helper.

    WWW-Helper is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    WWW-Helper is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with WWW-Helper.  If not, see <http://www.gnu.org/licenses/>.
-->
<!DOCTYPE html>
<meta charset="UTF-8" />
<meta name="author" content="Kevin Geng" />
<title>WWW-Helper</title>
<link href='http://fonts.googleapis.com/css?family=Coming+Soon|Cantarell' rel='stylesheet' type='text/css'>
<script type="text/javascript">
function signIn() {
  chrome.extension.getBackgroundPage().authorize(function(login) {
    document.querySelector("a[title='Sign In']").innerHTML=(login==true)?"Sign Out":"Sign In";
  });
}
function license() {
  document.getElementById('license').style.zIndex="200";
  document.getElementById('license').style.display='block';
}
function closeLicense() {
  document.getElementById('license').style.display='none';
  document.getElementById('license').style.zIndex="-1";
}
</script>
<style type="text/css">
body {
  text-align:center;
  background-color:grey;
}
* {
  -webkit-transition:0.2s ease-in;
  -o-transition:0.2s ease-in;
  -moz-transition:0.2s ease-in;
  transition:0.2s ease-in;
}
#container {
  position:relative; /* trick for "Sign In" positioning */
  margin: 5px auto;
  border-radius:15px;
  width:50%;
  height:500px;
  border:1px solid grey;
  padding:15px;
  background-color:#CCF2FF;
  background-image:-webkit-gradient(linear, left bottom, right top, from(#66D9FF), to(#E7F5FB));
  color:#E6E6E6;
}
h1#title {
  color:white;
  margin-top:15%;
  font-family:'Coming Soon',Tahoma,Arial,sans-serif;
  text-shadow:2px 2px 3px grey;
  font-size:48px;
  letter-spacing:3px;
}
a[title='Sign In'] {
  position:absolute;
  top:10px;
  right:10px;
  display:inline-block;
  background-color:#FFA366;
  color:white;
  text-decoration:none;
  border-radius:15px;
  padding:10px;
  font-family:Cantarell;
}
a[title='Sign In']:hover {
  background-color:#E6935C;
  text-shadow:1px 1px 1px #FF6600;
}
#actions {
  color:#008AE6;
  text-align:center;
  font-family:Cantarell;
}
#actions a.actions {
  display:inline-block;
  color:white;
  background-color:#19A3FF;
  padding:8px 6px;
  width:200px;
  margin:0 40px;
  border-radius:10px;
  text-decoration:none;
}
#actions a.actions:hover {
  background-color:#006BB2;
  text-shadow:2px 2px 3px #0099FF;
}

a[rel=license] {
  position:relative;
  top:120px;
  color:blue;
  text-decoration:none;
}
.popup {
  display:none;
  z-index:-1;
  margin:auto;
  text-align:center;
  background-color:white;
  padding:20px 51px;
  background-color:transparent;
  background-color:rgba(160,160,160,0.7);
  /* padding:17px 0 6px 6px; */
  border-radius:10px;
  width:720px;
  height:490px;
  position:absolute;
  top:0px;
  left:0px;
}
.popup iframe {
  border:none;
  width:100%;
  height:100%;
  margin:auto;
}
.popup div.x {
position:absolute;right:0px;top:0px;width:36px;color:white;font-size:14px;text-align:center;padding:0px;font-weight:bold;border-radius:0 10px 0 5px;cursor:default;background-color:#FF4500;
  border:1px solid grey;
  -webkit-transition:0.05s ease-in;
  -o-transition:0.05s ease-in;
  -moz-transition:0.05s ease-in;
  transition:0.05s ease-in;
}
.popup div.x:hover {
  background-color:#DC143C;
  box-shadow:0px 0px 10px #FF0000;
}
</style>
<div id="container">
<h1 id="title">Welcome to <abbr title="The Word within the Word Helper">WWW-Helper</abbr>!</h1>
<a href="#" title="Sign In" onclick="signIn()">Sign In</a>
<br />
<div id="actions">
<h2>What would you like to do?</h2>
<a href="" title="New Project" class="actions">Start a New Project</a>
<a href="" title="Open Project" class="actions">Open an Existing Project</a>
<!--<label title="Open Project" for="openproject">Open an Existing Project 
    <select id="openproject"><option value="">-------</option></select></label-->
<br />
<a rel="license" href="license.html" onclick="license();return false;">License</a>
<div id="license" class="popup">
<div class="x" onclick="closeLicense()">X</div>
<iframe src="license.html"></iframe>
</div>
</div>